<template>
  <div class="mui-content mh-container pb pd bg-w">
    <mh-header headName="自定义投票"> </mh-header>
    <div class="voting-inner">
      <div class="vot-form">
        <label>投票标题</label>
        <input type="text" placeholder="请输入投票标题" v-model="votTitle">
      </div>
      <div class="vot-form">
        <label>投票选项</label>
        <input type="text" :placeholder="index+1+'.请输入投票选项'" v-for="(item,index) in votChoice" v-model="item.value">
        <button type="button" class="mh-btn btn-add" @tap="addChoice">+</button>
      </div>
      <div class="vot-form">
        <label>开始时间</label>
        <input type="text" placeholder="请选择投票开始时间" v-model="startTime" @tap="openStartPicker" readonly>
      </div>
      <div class="vot-form">
        <label>结束时间</label>
        <input type="text" placeholder="请选择投票结束时间" v-model="endTime" @tap="openEndPicker" readonly>
      </div>
    </div>

    <div class="btn-row mh-pd">
      <button type="button" class="mui-btn-block mh-btn" disabled>发布</button>
      <button type="button" class="mui-btn-block mh-btn">保存为模板并发布</button>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "custom-voting",
    data () {
      return {
        votTitle: '',
        votChoice: [
          {
            index: 1,
            value: ''
          },
          {
            index: 2,
            value: ''
          }
        ],
        startTime: '',
        endTime: ''
      }
    },
    methods: {
      // 选择开始日期
      openStartPicker () {
        let _self = this;
        let dtPicker = new mui.DtPicker();
        dtPicker.show(function (selectItems) {
          _self.startTime = selectItems.value;
        })
      },
      // 选择结束日期
      openEndPicker () {
        let _self = this;
        let dtPicker = new mui.DtPicker();
        dtPicker.show(function (selectItems) {
          _self.endTime = selectItems.value;
        })
      },
      addChoice () {
        let chLength = this.votChoice.length;
        this.votChoice.push({
          index: chLength + 1,
          value: ''
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .voting-inner {
    padding-left: 1.5rem;
  }
  .btn-add {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 2.5rem;
    border-radius: 0;
    background: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
  }
  .vot-form {
    padding-top: 1rem;
    input[type=text] {
      padding: 0;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      border-color: #eee;
    }
  }
  .btn-row {margin-top: 2rem;}
</style>
